<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BeatifIntredPlayer 演示</title>
    
    <!-- 播放器样式 -->
    <link rel="stylesheet" href="./dist/BeatifIntredPlayer.min.css">
    <style>
        :root {
            --primary-color: #00a1d6;
            --secondary-color: #f0f2f5;
            --success-color: #52c41a;
            --error-color: #ff4c4f;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部导航 */
        .header {
            background: linear-gradient(135deg, #20232a 0%, #343a40 100%);
            color: white;
            padding: 1.2rem 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header h1 {
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            display: grid;
            grid-template-columns: 260px 1fr;
            gap: 1.5rem;
            padding: 2rem;
            max-width: 1440px;
            margin: 0 auto;
            width: 100%;
        }

        /* 侧边栏 */
        .sidebar {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 16px rgba(0,0,0,0.05);
            height: fit-content;
        }

        .sidebar h2 {
            font-size: 1.1rem;
            color: #343a40;
            margin-bottom: 1.2rem;
            padding-bottom: 0.8rem;
            border-bottom: 1px solid #e9ecef;
        }

        .video-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .video-btn {
            width: 100%;
            padding: 0.8rem 1.2rem;
            background: var(--secondary-color);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: #495057;
        }

        .video-btn:hover {
            background: var(--primary-color);
            color: white;
            transform: translateX(4px);
        }

        /* 播放器容器 */
        .player-container {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 16px rgba(0,0,0,0.05);
        }

        #video-player {
            border-radius: 8px;
            overflow: hidden;
            background: #000;
            aspect-ratio: 16/9;
        }

        /* 控制栏 */
        .custom-controls {
            margin-top: 1.5rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 0.5rem;
            background: var(--secondary-color);
            border-radius: 8px;
        }

        .control-btn {
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            background: white;
            color: var(--primary-color);
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .control-btn:hover {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 4px 12px rgba(0,161,214,0.2);
        }

        .control-btn svg {
            width: 18px;
            height: 18px;
        }

        /* 错误提示 */
        .error-message {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 8px;
            display: none;
            align-items: center;
            gap: 0.8rem;
            background: #fff0f0;
            color: var(--error-color);
            border: 1px solid #ffccc7;
        }

        .error-message::before {
            content: "⚠️";
            font-size: 1.2rem;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                grid-template-columns: 1fr;
                padding: 1.5rem;
            }

            .sidebar {
                width: 100%;
            }
        }

        @media (max-width: 576px) {
            .header {
                padding: 1rem;
            }

            .main-content {
                padding: 1rem;
            }

            .control-btn {
                flex: 1;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>BeatifIntredPlayer 演示平台</h1>
    </header>

    <main class="main-content">
        <aside class="sidebar">
            <h2>视频源选择</h2>
            <div class="video-list">
                <button class="video-btn" onclick="changeVideo('mp4')">
                    <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>
                    MP4 示例
                </button>
                <button class="video-btn" onclick="changeVideo('hls')">
                    <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l4.75 2.85.75-1.23-4-2.37V7z"/></svg>
                    HLS 示例
                </button>
                <button class="video-btn" onclick="changeVideo('flv')">
                    <svg width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1-10c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
                    FLV 示例
                </button>
            </div>
        </aside>

        <section class="player-container">
            <div id="video-player"></div>
            
            <div class="custom-controls">
                <button class="control-btn" onclick="togglePlay()">
                    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
                    播放控制
                </button>
                <button class="control-btn" onclick="toggleFullscreen()">
                    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
                    全屏切换
                </button>
                <button class="control-btn" onclick="showMessage('自定义功能演示', false)">
                    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm2-14h-4v2h4v6h-2v-4h-2V8h4z"/></svg>
                    数据统计
                </button>
            </div>

            <div class="error-message" id="error-msg"></div>
        </section>
    </main>

    <script src="./dist/BeatifIntredPlayer.min.js"></script>
    <script>
        let player = null;

        // 初始化播放器
        const initPlayer = (url, type) => {
            try {
                if (player) player.destroy();
                
                player = new BeatifIntredPlayer({
                    container: document.getElementById('video-player'),
                    src: url,
                    theme: 'var(--primary-color)',
                    customControls: [
                        {
                            icon: '📊',
                            tooltip: '播放统计',
                            action: () => showMessage('播放次数：1,234次', false)
                        }
                    ]
                });

                player.on('error', (err) => {
                    showMessage(`播放错误: ${err.message}`, true);
                });

                player.on('fullscreenchange', (isFullscreen) => {
                    document.querySelector('.control-btn svg').innerHTML = 
                        isFullscreen ? '<path fill="currentColor" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>' : 
                        '<path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>';
                });

            } catch (error) {
                showMessage(`播放器初始化失败: ${error.message}`, true);
            }
        };

        // 视频切换功能
        const videoSources = {
            mp4: 'http://foxcm.byusi.cn/static/uploads/videos/2ff6c153-fa20-46d3-830b-7af1a76b9400.mp4',
            hls: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
            flv: 'http://flv.bdplay.nodemedia.cn/live/bbb.flv'
        };

        function changeVideo(type) {
            if (videoSources[type]) {
                document.getElementById('error-msg').style.display = 'none';
                initPlayer(videoSources[type], type);
            }
        }

        // 控制功能
        const togglePlay = () => player && player.togglePlay();
        const toggleFullscreen = () => player && player.toggleFullscreen();

        // 消息提示系统
        const showMessage = (msg, isError) => {
            const elem = document.getElementById('error-msg');
            elem.textContent = msg;
            elem.style.display = 'flex';
            elem.style.background = isError ? '#fff0f0' : '#f6ffed';
            elem.style.color = isError ? var(--error-color) : var(--success-color);
            elem.style.borderColor = isError ? '#ffccc7' : '#b7eb8f';
            
            setTimeout(() => elem.style.display = 'none', 3000);
        };

        // 初始化
        window.addEventListener('DOMContentLoaded', () => {
            initPlayer(videoSources.mp4, 'mp4');
            document.querySelectorAll('.video-btn')[0].click();
        });
    </script>
</body>
</html>
